<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>消息中心</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <base href="http://localhost/campus/">
    <link rel="shortcut icon" href="static/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="static/css/main.css"/>
    <script src="static/js/jquery.min.js"></script>
    <script src="layui/layui.js" charset="utf-8"></script>
</head>
<body>
<div class="layui-fluid">
    <jsp:include page="/pages/common/header.jsp"/>
    <%--主体内容--%>

    <div style="width: 80%;height: 68%;margin: 5px auto;overflow-y: auto;background: #ececec">
        <div style="padding: 10px 20px;color:#2E2D3C">
            <p>我的消息</p>
        </div>
        <c:if test="${messageList.size() == 0}">
            <div style="text-align: center;font-size:36px;color: #2F4056">
                无消息
            </div>
        </c:if>
        <div style="width: 100%;">
            <c:forEach items="${messageList}" var="message" varStatus="status">
                <div class="message_item"
                     onclick="messageDetail('${message.content}','${message.id}','${status.index}')">
                    <div style="width: 100%;height: 30px;">
                        <span style="float: left;margin-left: 16px;padding:5px;line-height: 20px;">系统管理员：</span>
                        <span class="message_state"
                              style="float: right;margin-right: 16px;padding: 5px;color: ${message.messageState == 0 ? "darkorange" : "deepskyblue"}">${message.messageState == 0 ? "未读" : "已读"}</span>
                    </div>
                    <div style="width: 100%;height: 60px;">
                        <p style="padding: 0 42px;">${message.content}</p>
                    </div>
                    <div style="width: 100%;height: 20px;">
                        <span style="float: right;margin-right: 16px;color: #1E9FFF">${message.stringTime}</span>
                    </div>
                </div>
            </c:forEach>
        </div>
    </div>

    <%@include file="/pages/common/footer.jsp" %>
</div>
<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function () {
        var element = layui.element;

        //…
    });

    var layer = null;
    layui.use('layer', function () {
        layer = layui.layer;
    });

    function messageDetail(messageContent, messageId, elementIndex) {
        let content = "<div style='padding: 10px;'>" + messageContent + "</div>";
        let messageStates = $('.message_state');
        let index = layer.open({
            type: 1
            , area: '300px'
            , content: content
            , shadeClose: true
            , title: "消息详情"
            , resize: false
            , btn: ['标记已读', '删除']
            , yes: function () {
                $.ajax({
                    url: "http://localhost/campus/message/update"
                    , type: "POST"
                    , data: "messageId=" + messageId
                    , success: function (res) {
                        if (!res.success) {
                            layer.msg("发生异常");
                        } else {
                            $($(messageStates)[elementIndex]).css("color", 'deepskyblue');
                            $($(messageStates)[elementIndex]).text("已读");
                            layer.close(index);
                        }
                    }
                });
            }
            , btn2: function () {
                $.ajax({
                    url: "http://localhost/campus/message/delete"
                    , type: "POST"
                    , data: "messageId=" + messageId
                    , success: function (res) {
                        if (!res.success) {
                            layer.msg("发生异常");
                        } else {
                            window.location.reload();
                        }
                    }
                });
                layer.close(index);
            }
        });
    }
</script>
</body>
</html>
